<template>
  <div>
    <!-- 串联过滤器，前一个过滤器的返回值作为后一个的第一个参数   这样做可以提高代码的复用性 -->
    <!-- 当全局过滤器和局部过滤器重名时，会采用局部过滤器。 -->
    局部过滤器: {{ num | a(1, 2) | b}}
    全局过滤器：{{ globalFilter | two(1,2) }}
    <!-- 过滤器使用在 `v-bind` 中: 先对数据进行过滤处理，然后再传出去。 -->
    <div v-bind:id="num | b"></div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      num: 1.1111,
      globalFilter: 2.2222
    }
  },
  filters: {
    // 把需要过滤改变的值作为过滤器的第一个参数
    a(value, first, second){
      value = value + first + second
      return value
    },
    b(value){
      return value = value.toFixed(2)
    }
  }
}
</script>

<style>

</style>